<template>
  <!-- 审批服务完成弹出层 -->
    <view title="审批服务完成" style="background-color: #FFF">

      <view class="why-box why-box-flex">
        <view class="why-title">委托人主张的欠款本金</view>
        <view class="">{{ approveInfo.result }}</view>
      </view>
      <view class="why-box  why-box-flex" v-if="approveInfo.return_type!=''">
        <view class="why-title">回款结果</view>
        <view class="" style="">{{ approveInfo.return_type }}</view>
      </view>
      <view class="why-box " v-if="approveInfo.return_type!=''">
        <view class="why-title why-box-flex"  v-if="approveInfo.return_money!='0.00'">回款总金额<span style="font-weight: 300;">￥{{approveInfo.return_money}}</span></view>
        <view class="why-title why-box-flex" v-if="approveInfo.against_ben!='0.00'">冲销本金<span style="font-weight: 300;">￥{{approveInfo.against_ben}}</span></view>
        <view class="why-title why-box-flex" v-if="approveInfo.against_else!='0.00'">冲销其他款项<span style="font-weight: 300;">￥{{approveInfo.against_else}}</span></view>
      </view>
      <view class="why-box">
        <view class="why-title">律师已快递如下文件给我<span style="color: #FF0000;">*</span></view>
        <view class="xieyi" @click="is_kuaidi=!is_kuaidi">
          <image src="@/static/img/icon/radio.png" v-if="is_kuaidi==false" style="width: 34rpx;height: 34rpx;margin-top: 4rpx;"></image>
          <image src="@/static/img/icon/radioed.png" v-if="is_kuaidi==true" style="width: 34rpx;height: 34rpx;margin-top: 4rpx;"></image>
          <view class="" style="margin-left: 10rpx;font-weight: 400;">
            <view>原件一份</view>
              <!-- <view>{{approveInfo.return_type}}</view> -->
            <text style="line-height: 55rpx;" v-if="approveInfo.result =='全部不支持' || (approveInfo.result =='部分支持' && approveInfo.return_type == '全额回款')">
              <view  style="font-size: 26rpx;margin: 12rpx 0rpx;" >【追欠款的生效裁判文书/和解协议】</view>
            </text>
			<text style="line-height: 55rpx;" v-else>
              <view v-for="i in approveInfo.is_send" style="font-size: 26rpx;margin: 12rpx 0rpx;" :key="i">{{i}}</view>
            </text>
          </view>
        </view>
        <view v-if="is_show" class="xieyi" @click="is_kuaidi2=!is_kuaidi2">
          <image src="@/static/img/icon/radio.png" v-if="is_kuaidi2==false" style="width: 34rpx;height: 34rpx;margin-top: 4rpx;"></image>
          <image src="@/static/img/icon/radioed.png" v-if="is_kuaidi2==true" style="width: 34rpx;height: 34rpx;margin-top: 4rpx;"></image>
          <view class="" style="margin-left: 10rpx;font-weight: 400;">
          <view>复印件一份</view>
          <text style="line-height: 55rpx;">
            <view v-for="i in kuaidi2" style="font-size: 26rpx;margin: 12rpx 0rpx;" :key="i">{{i}}</view>
          </text>
          </view>
        </view>
      </view>
      <view class="why-box">
        <view class="why-title">我确认如下事项<span style="color: #FF0000;">*</span></view>
        <view class="xieyi" style="height: 80rpx;" @click="is_service=!is_service">
          <image src="@/static/img/icon/radio.png" v-if="is_service==false" style="width: 34rpx;height: 34rpx;margin-top: 4rpx;"></image>
          <image src="@/static/img/icon/radioed.png" v-if="is_service==true" style="width: 34rpx;height: 34rpx;margin-top: 4rpx;"></image>
          <view style="margin-left: 10rpx;font-weight: 300;">我已与委托人、律师确认服务完成。</view>
        </view>
        <view class="xieyi" style="height: 80rpx;" @click="is_shouyi=!is_shouyi">
          <image src="@/static/img/icon/radio.png" v-if="is_shouyi==false" style="width: 34rpx;height: 34rpx;margin-top: 4rpx;"></image>
          <image src="@/static/img/icon/radioed.png" v-if="is_shouyi==true" style="width: 34rpx;height: 34rpx;margin-top: 4rpx;"></image>
          <view style="margin-left: 10rpx;font-weight: 300;">我已收完委托人支付的投资收益。</view>
        </view>
      </view>
      <view class="service-list" style="padding-left: 20rpx;margin-top: 40rpx; ">
        <button class="service-item flex1 submit" v-if="finish!='active'">确认服务完成</button>
        <button class="service-item flex1 submit active" v-else  @click="$refs.popupSureServiceOk.open()">确认服务完成</button>
        <button class="service-item active flex1 submit"
                @click="$refs.popupNoSureServiceOk.open()">退回申请</button>
      </view>
      <!-- 确认服务完成弹出层 -->
      <uni-popup ref="popupSureServiceOk" type="dialog">
        <uni-popup-dialog type="info" okTxt="是" cancleTxt="否" content="我确认服务已经完成" :before-close="true"
                          @confirm="sureServiceOk(1, 'popupSureServiceOk')" @close="closePop('popupSureServiceOk')">
        </uni-popup-dialog>
      </uni-popup>
      <!-- 不确认服务完成弹出层 -->
      <uni-popup ref="popupNoSureServiceOk" type="dialog">
        <uni-popup-dialog type="info" okTxt="是" cancleTxt="否" content="确认退回申请" :before-close="true"
                          @confirm="sureServiceOk(2, 'popupNoSureServiceOk')" @close="closePop('popupNoSureServiceOk')">
        </uni-popup-dialog>
      </uni-popup>
    </view>
</template>
<script>
import {
  mixin
} from '@/common/mixins/specialist_order_state.js';
import {
  share_coupon
} from '@/common/mixins/share_coupon.js';

export default {
  mixins: [mixin, share_coupon],
  data() {
    return {
      approveInfo:{}, //审批信息
      ischossall:true,
      current_item:{},
      order_id: '',
      is_kuaidi:false,
      is_kuaidi2:false,
      kuaidi2:[
      	'【执行申请书】',
      	'【执行立案通知书】'
      ],
      is_service:false,
      is_shouyi:false,
      shenpi_jiechu_one:false,//审批解除同意按钮1
      shenpi_jiechu_two:false,//审批解除同意按钮2
	  is_show:false,
    }
  },
  onLoad(params){
    if (params.order_id) {
      this.order_id = params.order_id;
    };
    this.approveInfo = JSON.parse(params.approveInfo);
    console.log("----- this.approveInfo", this.approveInfo)
	if(this.approveInfo.result =='全部支持' && this.approveInfo.return_type =='全额回款'){
		this.is_show = false;
	}else if(this.approveInfo.result =='部分支持' && this.approveInfo.return_type =='全额回款'){
		this.is_show = false;
	}else if(this.approveInfo.result =='全部不支持'){
		this.is_show = false;
	}else{
		this.is_show = true;
	}
  },
  computed:{
    finish(){
      if(this.is_show){
        if(this.is_kuaidi==true&&this.is_kuaidi2==true&&
            this.is_service==true&& this.is_shouyi==true){
          return 'active';
        }
      }else{
        if(this.is_kuaidi==true&&
            this.is_service==true&& this.is_shouyi==true){
          return 'active';
        }
      }


    }
  },
  watch:{
    shenpi_jiechu_two(){
      this.isbtn();
    },
    shenpi_jiechu_one(){
      this.isbtn();
    }
  },
  methods: {
    isbtn() {
      if (this.shenpi_jiechu_two && this.shenpi_jiechu_one) {
        this.ischossall = false;
      } else {
        this.ischossall = true;
      }
    },
    async sureServiceOk(status, pop) {
      if(status==1){
        if(this.is_service==false || this.is_shouyi==false){
          uni.showToast({
            title:'我确认如下事项,需全选',
            icon:'none'
          })
          return
        }
      }
      let formData = {
        id: this.order_id,
        token: uni.getStorageSync('token'),
        status: status
      };
      let res = await this.$api('index.t_sureOrder', formData);
      if (res.code == 1) {
        if (pop == 'popupSureServiceOk') {
          this.closePop('popupSureServiceOk');
          this.replace('/pages/investor/user/service-ok', {
            order_id: this.order_id
          });
        } else if (pop == 'popupNoSureServiceOk') {
          this.closePop('popupNoSureServiceOk');
          this.replace('/pages/investor/user/service-investor', {
            order_id: this.order_id,
            disableApproveServiceOk:"1",
            disableApproveRemoveEntrust:'1'
          });
        }
      }
    },
  }

}
</script>
<style lang="scss">
.content {
  padding-bottom: 30rpx;
}
.ok-box{
  background: #f5f5f5;
  display: flex;
  margin-left: 30rpx;
  justify-content: space-between;
  align-items: center;
.amount{
  font-size: 32rpx;
.red{
  color:#f00;
}
.blod{
  font-weight: bold;
}
}}
.why-box {
  background-color: #ffffff;
  border-radius: 26rpx;
  padding: 30rpx;
  margin-left: 20rpx;
  margin-right: 20rpx;
  padding-bottom: 0;
  .why-title {
    font-weight: bold;
    margin-bottom: 30rpx;
}
  .why-txts {
    width: 180rpx;
    height: 60rpx;
    background-color: #FFC900;
    color: white;
    line-height: 60rpx;
    text-align: center;
    border-radius: 38rpx;
    font-size: 28rpx;
}
  .xieyi{
    display: flex;
    align-items: flex-start;
}

}
.submit{
  background-color: #F5F5F5;
  border: 1rpx solid #ccc;
  border-radius: 38rpx;
  color: #ccc;
}
.ok-btn{
  margin-right: 42rpx;
  width: 300rpx;
  height: 60rpx;
  background: #FFC900;
  border: 1rpx solid #FFC900;
  opacity: 1;
  border-radius: 38rpx;
  font-size: 30rpx;
  font-family: PingFang-SC-Medium;
  color: #FFFFFF;
  text-align: center;
  line-height: 60rpx;
}
//下半部分圆角矩形
.service-item {
  border-radius: 50rpx;
  height: 76rpx;
}
.why-box-flex{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  .why-title {
    font-weight: bold;
    margin-bottom: 0rpx;
  }
}
uni-page-body {
  background-color: #fff;
  height: 100%;
}
</style>
